<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('学习视频列表')" />
  </head>
  <body class="gray-bg">
    <div class="container-div">
      <div class="row">
        <div class="col-sm-12 search-collapse">
          <form id="formId">
            <div class="select-list">
              <ul>
                <li>
                  <label>视频标题：</label>
                  <input type="text" name="title" />
                </li>

                <li>
                  <a
                    class="btn btn-primary btn-rounded btn-sm"
                    onclick="$.table.search()"
                    ><i class="fa fa-search"></i>&nbsp;搜索</a
                  >
                  <a
                    class="btn btn-warning btn-rounded btn-sm"
                    onclick="$.form.reset()"
                    ><i class="fa fa-refresh"></i>&nbsp;重置</a
                  >
                </li>
              </ul>
            </div>
          </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
          <a
            class="btn btn-success"
            onclick="$.operate.add()"
            shiro:hasPermission="learn:video:add"
          >
            <i class="fa fa-plus"></i> 添加
          </a>
          <a
            class="btn btn-primary single disabled"
            onclick="$.operate.edit()"
            shiro:hasPermission="learn:video:edit"
          >
            <i class="fa fa-edit"></i> 修改
          </a>
          <a
            class="btn btn-danger multiple disabled"
            onclick="$.operate.removeAll()"
            shiro:hasPermission="learn:video:remove"
          >
            <i class="fa fa-remove"></i> 删除
          </a>
          <a
            class="btn btn-warning"
            onclick="$.table.exportExcel()"
            shiro:hasPermission="learn:video:export"
          >
            <i class="fa fa-download"></i> 导出
          </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
          <table id="bootstrap-table"></table>
        </div>
      </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
      var editFlag = [[${@permission.hasPermi('learn:video:edit')}]];
      var removeFlag = [[${@permission.hasPermi('learn:video:remove')}]];
      var prefix = ctx + "learn/video";

      $(function() {
          var options = {
              url: prefix + "/list",
              createUrl: prefix + "/add",
              updateUrl: prefix + "/edit/{id}",
              removeUrl: prefix + "/remove",
              exportUrl: prefix + "/export",
              modalName: "学习视频",
              columns: [{
                  checkbox: true
              },
              {
                  field: 'id',
                  title: '视频ID'
              },
              {
                  field: 'title',
                  title: '视频标题'
              },
              {
                  field: 'coverUrl',
                  title: '封面图片',
                  formatter: function(value, row, index) {
                      return $.table.imageView(ctx + value);
                  }
              },
              {
                  field: 'videoUrl',
                  title: '视频资源',
                  formatter: function(value, row, index) {
                      if (!value) {
                          return '<span class="text-muted">无视频资源</span>';
                      }

                      var playButton = '<button class="btn btn-info btn-xs" onclick="playVideo(\'' +ctx+ value + '\', ' + row.id + ')">' +
                                       '<i class="fa fa-play"></i> 播放</button>';
                      var downloadButton = '<a href="' + ctx+value + '" download class="btn btn-success btn-xs" style="margin-left: 5px;">' +
                                           '<i class="fa fa-download"></i> 下载</a>';

                      return '<div>' + playButton + downloadButton + '</div>';
                  }
              },
              {
                  field: 'duration',
                  title: '视频时长(秒)'
              },
              {
                  field: 'category',
                  title: '分类',
                  formatter:function (value){
                      if (value=='LLXX'){
                          return '<span class="label-primary">理论学习</span>'
                      }if (value=='DSJY'){
                          return '<span class="label-primary">党史教育</span>'
                      }if (value=='ZCJD'){
                          return '<span class="label-primary">政策解读</span>'
                      }if (value=='XJSJ'){
                          return '<span class="label-primary">先进事迹</span>'
                      }
                      else
                          return value
                  }
              },
              {
                  field: 'description',
                  title: '视频描述'
              },
              {
                  field: 'viewCount',
                  title: '观看次数'
              },
              {
                  field: 'status',
                  title: '状态',
                  formatter: function(value, row, index) {
                      if (value == 1) {
                          return '<span class="label-success">启用</span>';
                      } else {
                          return '<span class="label-danger">禁用</span>';
                      }
                  }
              },
              {
                  title: '操作',
                  align: 'center',
                  formatter: function(value, row, index) {
                      var actions = [];
                      actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                      actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                      return actions.join('');
                  }
              }]
          };
          $.table.init(options);
      });
    </script>

    <!-- 视频播放模态框 -->
    <div id="videoModal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">视频播放</h4>
          </div>
          <div class="modal-body">
            <video id="videoPlayer" width="100%" height="400" controls>
              您的浏览器不支持视频播放。
            </video>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 引入学习时长记录器 -->
    <script th:src="@{/ruoyi/js/study-time-recorder.js}"></script>
    <script type="text/javascript">
      // 当前播放的视频ID
      let currentVideoId = null;

      // 页面加载完成后自动开始记录学习时长
      $(document).ready(function () {
        console.log("页面加载完成，开始记录学习时长");
        // 开始记录学习视频模块的学习时长（模块级记录）
        StudyTimeRecorder.start("video", 0);
      });

      // 页面卸载时触发
      window.addEventListener("unload", function (event) {
        console.log("unload 事件触发，结束学习记录");
        StudyTimeRecorder.end(true);
      });

      // 播放视频
      function playVideo(videoSrc, videoId) {
        currentVideoId = videoId;
        $("#videoPlayer").attr("src", videoSrc);
        $("#videoModal").modal("show");
      }

      // 视频模态框关闭时的处理
      $("#videoModal").on("hidden.bs.modal", function () {
        currentVideoId = null;
      });
    </script>
  </body>
</html>
